<template>
	<view>
		<view class="top">
			<view class="item flex_jc_sb">
				<view class="i_l">
					取消原因
				</view>
				<view class="i_r flex_jc_cent" @click="open">
					<view class="" style="color: #000;" v-if="params.refundApplyReason">
						{{params.refundApplyReason}}
					</view>
					<view class="" v-else>
						请选择 <uni-icons size="14" color="#D1CDCD" type="right"></uni-icons>
					</view>
				</view>
			</view>
			<view class="item flex_jc_sb">
				<view class="i_l">
					订单合计
				</view>
				<view class="p">
					<text>￥</text>{{data.info.payAmount}}
				</view>
			</view>
		</view>
		<view class="conten_1">
			<view class="textflex flex_jc_sb">
				<view class="t1">文字说明 </view>
				<view class="t2">您还可以输入{{120-params.refundApplyDesc.length}}字</view>
			</view>
			<textarea maxlength="120" placeholder="请您详细填写申请说明" v-model="params.refundApplyDesc">
			</textarea>
			<imageUpload :imgList="data.imageList" @change="imgFn" upWith="160" upHeight="160"></imageUpload>
		</view>
		
		<view class="" style="height: 220rpx;"></view>
		<view class="footerbtn">
			<view class="cont">
				<view class="btn" @click="handleSubmit">
					提交申请
				</view>
			</view>
		</view>
		
		
		<uni-popup ref="selectPopup" type="bottom" :safe-area="false">
			<view class="selectPopup">
				<view class="title">退款原因</view>
				<uni-icons @click="close" class="icon" type="closeempty" size="24"></uni-icons>
				<view class="scllow">
					<view class="radio" v-for="(item,index) in data.refundReason" :key="index"
					@click="changShop(item)">
						<view class="">
							{{item.dictValue}}
						</view>
						<image  v-if="item.default" src="/static/radioact.png" mode=""></image>
						<image  v-else src="/static/radio.png" mode=""></image>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		reactive, ref
	} from 'vue';
	import {onLoad} from '@dcloudio/uni-app'
	import {
		getdictType,ordersInfo,ordersRefund
	} from '@/common/http.api.js'
	
	
	

	const data = reactive({
		info:{},
		refundReason:[],
		imageList:[]
	})
	const params = ref({
		id: '',
		refundApplyReason:'',
		refundApplyDesc:'',
		refundApplyImgs:''
	})
	const selectPopup = ref(null)
	function open(){
		data.refundReason.forEach(item=>{
			item.default = item.dictValue == params.value.refundApplyReason
		})
		selectPopup.value.open()
	}
	function close(){
		selectPopup.value.close()
	}
	function imgFn(e){
		data.imageList = e
		console.log(e);
		let ulist = e.map(item=>{return item.url})
		params.value.refundApplyImgs = ulist.join(',')
	}
	
	function handleSubmit(){
		if(params.value.refundApplyReason == ''){
			uni.showToast({
				title:'请选择退款原因',
				icon:'none'
			})
			return
		}
		ordersRefund(params.value).then(res=>{
			if(res.code == 200){
				uni.showToast({
					title:'已提交退款',
					icon:'none'
				})
				uni.navigateBack()
			}
		})
	}
	
	function changShop(item){
		item.default = true
		params.value.refundApplyReason = item.dictValue
		selectPopup.value.close()
	}
	
	
	onLoad((option)=>{
		params.value.id = option.id
		getdictType('self_order_refund_reason').then(res=>{
			data.refundReason = res.data
		})
		ordersInfo({
			id: option.id
		}).then(res => {
			data.info = res.data.orders
		})
	})
</script>

<style lang="scss">
	page {
		background: #f8f8f8;
	}

	.top {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx auto;
		padding: 20rpx;
		box-sizing: border-box;
		.item{
			padding-bottom: 30rpx;
			margin-top: 20rpx;
			.i_l{
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}
			.i_l::after{
				content: '*';
				color: red;
			}
			.i_r{
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #D1CDCD;
			}
			.p{
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 32rpx;
				color: #FF0000;
				text{
					font-size: 24rpx;
				}
			}
		}
	}

	.conten_1 {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 30rpx 20rpx 20rpx 20rpx;
		box-sizing: border-box;
		margin: 20rpx auto;

		.items {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			margin-bottom: 36rpx;

			.select {
				display: flex;
				align-items: center;
				color: #AEAEAE;
			}

			.xt {
				font-size: 20rpx;
				color: #ADADAD;
			}
		}

		.textflex {
			.t1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}

			.t2 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #AEAEAE;
			}
		}

		textarea {
			font-size: 28rpx;
			width: 100%;
			height: 160rpx;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
		}
	}

	.footerbtn {
		width: 750rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0%;
		height: 120rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		.cont {
			display: flex;
			height: 120rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			align-items: center;
			padding: 20rpx 20rpx 20rpx 40rpx;
			box-sizing: border-box;
			justify-content: space-between;
			.btn {
				width: 670rpx;
				height: 80rpx;
				background: #FF7700;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-family: PingFang SC, PingFang SC;
				border-radius: 40rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #ffffff;
				line-height: 80rpx;
				text-align: center;
			}
		}
	}
	
	
	.selectPopup {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 30rpx 20rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: border-box;
		position: relative;
	
		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			text-align: center;
			margin-bottom: 24rpx;
		}
	
		.icon {
			position: absolute;
			top: 30rpx;
			right: 30rpx;
		}
	
		.scllow {
			width: 100%;
			height: 570rpx;
			overflow-y: auto;
		}
	
		.radio {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			width: 710rpx;
			margin: 20rpx auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			box-sizing: border-box;
	
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

	}
</style>